<template>
    <div v-html="html"></div>
    <!--v-highlight-->
</template>

<script>
import { createPatch } from 'diff'
import { Diff2Html } from 'diff2html'
// import hljs from 'highlight.js'
// import 'highlight.js/styles/googlecode.css'
import 'diff2html/dist/diff2html.css'

export default {
    name: 'code-diff',
    props: {
        oldString: {
            type: String,
            default: ''
        },
        newString: {
            type: String,
            default: ''
        },
        context: {
            type: Number,
            default: 5
        },
        outputFormat: {
            type: String,
            default: 'line-by-line'
        },
        header: {
            type: String
        }
    },
    directives: {
        // highlight: function (el) {
        //     let blocks = el.querySelectorAll('code')
        //     blocks.forEach((block) => {
        //         hljs.highlightBlock(block)
        //     })
        // }
    },
    computed: {
        html () {
            return this.createdHtml(this.oldString, this.newString, this.context, this.outputFormat)
        }
    },
    methods: {
        createdHtml (oldString, newString, context, outputFormat) {
            let args = [this.header, oldString, newString, '', '', { context: context }]
            let dd = createPatch(...args)
            let outStr = Diff2Html.getJsonFromDiff(dd, {
                inputFormat: 'diff',
                outputFormat: outputFormat,
                showFiles: false,
                matching: 'lines'
            })
            // console.log(dd)
            let html = Diff2Html.getPrettyHtml(outStr, {
                inputFormat: 'json',
                outputFormat: outputFormat,
                showFiles: false,
                matching: 'lines'
            })
            return html
        }
    }
}
</script>
